<template>
	<view class="message-box">
		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<u-cell icon="setting-fill" :isLink="true" v-for="item in dataList" :key="item" @click="jumpPage(item)">
				<u--image slot="icon" :src="item.noticeImg || emptyImg" width="50" height="50"></u--image>
				<template #title>
					<view class="u-flex u-m-l-10">
						<view class="u-m-r-10">{{ item.noticeTitle }}</view>
						<view class="" v-if="item.noticeTop === 1"><u-tag text="置顶" plain size="mini" type="warning"></u-tag></view>
					</view>
				</template>
				<template #label>
					<view class="u-flex u-flex-between u-font-22 u-tips-color" style="line-height: 46rpx;">
						<view class="u-m-l-10">更新日期: {{ item.updatedAt }}</view>
						<view class=""></view>
					</view>
				</template>
			</u-cell>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			emptyImg: '/static/image/empty/icon-fapiao.png',
			dataList: [],
			searchInfo: {},
			// 分页配置
			upOption: {
				textNoMore: '没有更多了',
				noMoreSize: 1,
				empty: {
					icon: require('@/static/image/empty/icon-baobiao.png'),
					tip: '暂无通知信息',
					fixed: true,
					top: '300rpx'
				},
				toTop: {
					safearea: true
				}
			}
		};
	},
	methods: {
		jumpPage(item) {
			uni.navigateTo({
				url: '/packMyself/message/messageInfo?id=' + item.id
			});
		},
		// 获取优惠券列表
		async upCallback(page) {
			this.searchInfo.page = page.num; // 页码, 默认从1开始
			this.searchInfo.limit = page.size; // 页长, 默认每页10条
			const res = await this.$api.notice.noticeAllList(this.searchInfo);
			const curPageData = res.data.list ? res.data.list : [];
			let curPageLen = curPageData.length;

			//设置列表数据
			if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
			this.dataList.push(...curPageData); //追加新数据
			//后台接口有返回列表的总页数 totalPage
			this.mescroll.endBySize(curPageLen, res.data.countNum);
		}
	}
};
</script>

<style lang="scss">
.message-box {
	background: #fff;
}
</style>
